<template>
  <a class="activity-item">
    <img :src="item.face" class="activity-item-face">
    <div class="activity-item-bd">
      <h3><em v-if="item.tag">{{item.tag}}</em>{{item.name}}</h3>
      <p>{{item.time}}</p>
      <div class="activity-item-price">{{300 | price}}</div>
    </div>
    <div class="activity-item-ft">{{item.status}}进行中</div>
  </a>
</template>

<script>
export default {
  props: ['item']
}
</script>

<style lang="scss" scoped>
$color-tag: #d1b166;

.activity-item {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  border-bottom: 1px solid $bg-dark;
  background: $bg;

  + a {
    margin-top: 10px;
  }

  &-face {
    font-size: 85px;
    height: 1em;
    width: 1em;
    margin-right: 15px;
    line-height: 0;
  }

  &-bd {
    flex: 1;
    position: relative;

    > h3 {
      margin: 0;
      font-weight: normal;
      font-size: 14px;

      > em {
        display: block;
        float: right;
        padding: 3px 5px;
        font-size: 10px;
        font-style: normal;
        color: $color-tag;
        border: 1px solid;
        border-radius: 2em;
      }
    }

    > p {
      margin-top: 1em;
      line-height: 1;
      font-size: $font-size-xs;
      color: #666;
    }
  }

  &-price {
    margin-top: 1rem;
    font-size: $font-size;
    color: $color-price;
  }

  &-ft {
    padding: 1em;
    color: lighten($color-price, 20%);
  }
}
</style>
